<template>
	<view class="content">
		<navbar :isback="isback" :title="title"></navbar>
		<view class="userInfo">
			<view class="">
				<u-image width="104rpx" height="104rpx" shape="circle" :src="userInfo.avatar" @click="viewImg([userInfo.avatar],userInfo.avatar)"></u-image>
				<text style="font-size: 30rpx;color: #999999;" @click="changeAvatar">更换头像</text>
			</view>
			<view class="" style="font-size: 30rpx;color: #666666;">
				<text>姓名：</text>
				<u-input v-model="userInfo.name" :type="type" :border="border" input-align="right"
					placeholder="请输入您的姓名" />
			</view>
			<view class="" style="font-size: 30rpx;color: #666666;">
				<text>年龄：</text>
				<u-input v-model="userInfo.age" :type="type" :border="border" input-align="right"
					placeholder="请输入您的年龄" />
			</view>
			<view class="" @click="sexShow = true" style="font-size: 30rpx;color: #666666;">
				<text>性别：</text>
				<text>{{userInfo.sex==1?"男":"女"}}</text>
			</view>
			
			
		</view>
		<view class="textar">
			<text>简介：</text>
			<textarea placeholder="个人简介" maxlength="60" v-model="userInfo.Introduction" />
			<text class="textLen">{{userInfo.Introduction.length}}/60</text>
		</view>
		<view class="" style="margin: 100rpx 0 50rpx;">
			
		<u-button shape="circle" :custom-style="{width: '500rpx',color:'#000000',background: $store.state.color}" @click="save">保存信息</u-button>
		</view>
		<u-select v-model="sexShow" :list="list" @confirm="confirm"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isback: true,
				title: '编辑资料',
				
				userInfo: {},

				type: 'text', // input类型
				border: false, // 是否显示边框
				sexShow: false, // picker选择性别
				list: [{ // 性别列表
						value: '1',
						label: '男'
					},
					{
						value: '0',
						label: '女'
					}
				],
			}
		},
		onLoad() {
			let userInfo = uni.getStorageSync("userInfo");
			this.userInfo = userInfo;
		},
		methods: {
			// 预览图片
			viewImg(urls,current){
				this.common.viewImg(urls,current)
			},
			// 更换头像
			async changeAvatar() {
				var that = this;
				let img = await this.common.uploadImageOdd('avatar');
				that.userInfo.avatar = img;
			},
			// 保存信息
			save() {
				if (this.userInfo.name == '' || this.userInfo.sex == '') {
					uni.showToast({
						title: '请完善您的信息,不可为空',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title: '全力为您修改中...'
				});
				let userInfo = this.userInfo;
				let data = {
					_id: this.$store.state._id,
					uid: this.$store.state.uid,
					avatar: userInfo.avatar,
					name: userInfo.name,
					sex: userInfo.sex,
					age: userInfo.age,
					Introduction: userInfo.Introduction, // 简介
					bgImg: userInfo.bgImg,
					type: 'setting'
				}
				uniCloud.callFunction({ //客户端调用云函数，云函数调用数据库
					name: 'userTable', //在云函数中的函数名,也就是创建的云函数的文件夹的名字
					data: data,
					success: (res) => {
						// console.log(res);
						uni.hideLoading();
						if (res.result.code == 0) {
							// this.getUserInfo();
							uni.showToast({
								title: res.result.msg,
								icon: 'none'
							})
							
							uni.setStorageSync("userInfo",data)
							setTimeout(()=>{
								uni.navigateBack({
									delta: 1
								})
							},1200)
						}
					},
					error: function(e) {}
				})
				// console.log("保存信息");
			},
			// picker确定
			confirm(value) {
				// console.log(value);
				this.userInfo.sex = value[0].value;
			},
			// 获取用户信息
			getUserInfo() {
				uniCloud.callFunction({
					name: 'getUserInfo',
					data: {
						uid: this.$store.state.uid
					},
					success(res) {
						// console.log(res);
						uni.setStorageSync("userInfo", res.result.data);
						setTimeout(()=>{
							uni.navigateBack({
								delta: 1
							})
						},1500)
					},
					fail(err) {
						console.log(err);
					}
				})
			}
		}
	}
</script>

<style scoped>
	.content {
		/* padding: 20rpx 30rpx; */
	}

	.userInfo {}

	.userInfo>view {
		height: 126rpx;
		border-bottom: 1rpx solid #EDEDED;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
	}

	.userInfo>view input {
		/* text-align: right; */
	}
	
	.textar{
		height: 260rpx;
		font-size: 30rpx;
		color: #666666;
		
		padding: 30rpx;
		box-sizing: border-box;
		
		position: relative;
	}
	.textLen{
		position: absolute;
		bottom: -10rpx;
		right: 50rpx;
		font-size: 26rpx;
	}
	.textar textarea{
		width: 100%;
		height: 100%;
		margin-top: 20rpx;
		border: 1rpx solid #F0AD4E;
		border-radius: 6rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}
</style>
